<template>
  <div class="login-container">
    <div class="login-wrap">
      <div class="title">Java项目实战网管理后台</div>
      <input type="text" placeholder="请输入用户名" v-model="userName" />
      <input type="password" placeholder="请输入密码" v-model="passWord" />
      <button @click="handleLogin">登 录</button>
    </div>
  </div>
</template>
<script>

// import moment from 'moment';
import { login, setDefaultToken } from '../../api';

export default {
  name: 'Manage',
  components: {
    
  },
  data() {
    return {
      userName: '',
      passWord: '',
    };
  },
  methods: {
    handleLogin() {
      login(this.userName, this.passWord).then(res => {
        if (res.data.success) {
          sessionStorage.setItem('userName', this.userName);
          sessionStorage.setItem('token', res.data.data.tokenValue);
          setDefaultToken(res.data.tokenValue);
          this.$router.push('/main');
        }
      });
    },
  },
  mounted() {

  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  // background: url(../../assets/login-bg.jpg) center no-repeat;
  .login-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 400px;
    height: 300px;

    .title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 32px;
      text-align: center;
    }


    input {
      width: 400px;
      line-height: 40px;
      outline: none;
      font-size: 16px;
      margin-bottom: 20px;
      padding-left: 12px;
      box-sizing: border-box;
    }

    button {
      width: 400px;
      height: 48px;
      line-height: 48px;
      font-weight: bold;
      font-size: 16px;
      color: #fff;
      background-color: #009a61;
      outline: none;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
